import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './invitedetail.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";


import NavigateBar from "@/components/NavigateBar";
import { LangThai } from "@/utils/langThai";


/**
 * 登录页
 */
export default function TodayEarnRules() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前 列表
    const [curList, setCurList] = useState([]);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangThai);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false);

        setCurList([
            '1. เมื่อคุณใช้กระเป๋าสตางค์ CMC wallet แพลตฟอร์มจะคำนวณรางวัลตามบันทึกการโอนรายวันของคุณ และคำนวณรางวัลตามจำนวนสกุลเงินดิจิทัลสะสมสูงสุดที่โอนเข้ากระเป๋าสตางค์ในวันเดียว.',
            '2. การคำนวณรางวัลจะขึ้นอยู่กับจำนวนสูงสุดรวมของสกุลเงินดิจิทัลที่โอน (แปลงเป็น USDT) ที่บันทึกไว้ในประวัติศาสตร์ของวันเท่านั้น การโอนสินทรัพย์ดิจิทัลออกจากกระเป๋าเงินจะไม่ส่งผลต่อการคำนวณรางวัล.',
            '3. หากสินทรัพย์ดิจิทัลที่เก็บไว้ในกระเป๋า CMC wallet ถูกเก็บไว้ในกระเป๋าหลังเวลา 00.00 น. จะถือเป็นสินทรัพย์ที่โอนในวันถัดไปและจะรวมอยู่ในการคำนวณรางวัล.',
            '4. ทรัพย์สินที่โอนระหว่างกระเป๋า CMC wallet จะไม่ถูกคำนวณเป็นรายได้รางวัล.',
            '5. รายได้ของวันนั้นจะถูกแปลงเป็นรางวัลเงินสดหลังจากการคำนวณเสร็จสิ้นในวันถัดไป คุณสามารถถอนรางวัลไปยังกระเป๋าเงินของคุณเองได้.',
            '6. เราให้เวลาการถอนเงินแก่ผู้ใช้แต่ละราย เมื่อเวลาถอนเงินของคุณหมดลง คุณจะไม่สามารถถอนรางวัลได้อีกต่อไป.',
            '7. เมื่อสินทรัพย์ทั้งหมดที่โอนไปยังกระเป๋าเงินของคุณในวันเดียวเกิน 10,000 usdt จำนวนการถอนจะเพิ่มขึ้นหนึ่งโดยอัตโนมัติ.',
            '8. สินทรัพย์ดิจิทัลในปัจจุบันที่สร้างรางวัลรองรับเฉพาะสกุลเงินที่มีเสถียรภาพ USDT เท่านั้น.',
            '9. แพลตฟอร์มไม่อนุญาตให้มีการโอนที่ฉ้อโกงและกิจกรรมฉ้อโกงอื่น ๆ เพื่อฉ้อโกงรางวัล สิทธิ์ในการตีความเป็นของแพลตฟอร์มนี้.',
        ])

        //打点
        doHitEvent("INVITE_EARN_RULES_START")

        return () => {
            //打点
            doHitEvent("INVITE_EARN_RULES_END")
        }
    }, [])

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>{curLang.transferEarnRule}</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull">
                {/* 菜单 列表 */}
                <div className="pageContentColumnFull">
                    <div className={styles.inviteDetailList}>
                        {curList && curList.map((value, index) => {
                            return (
                                <div className={styles.inviteDetailListItemRule} key={index}>
                                    <div className={styles.inviteDetailListItemTitleRule}>{value}</div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}